<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="最近尝试学习REST API的时候,拜读了一篇博客Build Node.js RESTful APIs in 10 Minutes,里面的代码是用express写的.其中一段路由分发的代码完全颠覆了我的认识,让我重新思考怎样才是最优雅的路由实现方式.">
    

    <!--Author-->
    
        <meta name="author" content="kobako">
    

    <!--Open Graph Title-->
    
        <meta property="og:title" content="express route实践"/>
    

    <!--Open Graph Description-->
    

    <!--Open Graph Site Name-->
    <meta property="og:site_name" content="Kobako"/>

    <!--Type page-->
    
        <meta property="og:type" content="article" />
    

    <!--Page Cover-->
    

    <meta name="twitter:card" content="summary" />
    

    <!-- Title -->
    
    <title>express route实践 - Kobako</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

    <!-- Custom Fonts -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Gallery -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.css" type="text/css" rel="stylesheet" />

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/kobako-blog/css/style.css">

    <!-- Google Analytics -->
    


</head>


<body>

<div class="bg-gradient"></div>
<div class="bg-pattern"></div>

<!-- Menu -->
<!--Menu Links and Overlay-->
<div class="menu-bg">
    <div class="menu-container">
        <ul>
            
            <li class="menu-item">
                <a href="/kobako-blog/">
                    主页
                </a>
            </li>
            
            <li class="menu-item">
                <a href="/kobako-blog/archives">
                    历史文章
                </a>
            </li>
            
        </ul>
    </div>
</div>

<!--Hamburger Icon-->
<nav>
    <a href="#menu"></a>
</nav>

<div class="container">

    <!-- Main Content -->
    <div class="row">
    <div class="col-sm-12">

        <!--Title and Logo-->
        <header>
    <div class="logo">
        <a href="/kobako-blog/"><i class="logo-icon fa fa-apple" aria-hidden="true"></i></a>
        
    </div>
</header>

        <section class="main">
            
<div class="post">

    <div class="post-header">
        <h1 class="title">
            <a href="/kobako-blog/2018/06/04/practice-express-route/">
                express route实践
            </a>
        </h1>
        <div class="post-info">
            
                <span class="date">2018-06-04</span>
            
            
            
        </div>
    </div>

    <div class="content">

        <!-- Gallery -->
        

        <!-- Post Content -->
        <p>最近尝试学习REST API的时候,拜读了一篇博客<a href="https://www.codementor.io/olatundegaruba/nodejs-restful-apis-in-10-minutes-q0sgsfhbd" target="_blank" rel="noopener">Build Node.js RESTful APIs in 10 Minutes</a>,里面的代码是用express写的.其中一段路由分发的代码完全颠覆了我的认识,让我重新思考怎样才是最优雅的路由实现方式.</p>
<a id="more"></a>
<p>安哥说要善于总结与反思,尝试着把所思所得记录下来.这也是开始用hexo的理由.</p>
<p>第一步是问谷歌,看了这个博客<a href="https://www.terlici.com/2014/09/29/express-router.html" target="_blank" rel="noopener">Organizing your app routes with the Express 4 Router</a>,一眼看过去是以前用过的操作,但是还是耐着性子看了下去,把一些新的感悟总结一下:</p>
<ol>
<li>app.use的是路由</li>
<li>路由里面可以use新的路由,理论上是可以无限嵌套的</li>
<li>为了保持入口文件简单,只在里面引用一个引用了所有路由的路由</li>
<li>可以在router里使用middleware</li>
<li>中间件跟路由处理方法的主要区别是路由参数里多一个next,使用上没多大区别(这也是express坑的地方)</li>
</ol>
<p>现在大部分express应用都是用以上写法,所以我们可以看到这样的目录结构</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">controllers/</span><br><span class="line">  animals.js</span><br><span class="line">  cars.js</span><br><span class="line">  index.js</span><br><span class="line">models/</span><br><span class="line">public/</span><br><span class="line">tests/</span><br><span class="line">app.js</span><br><span class="line">package.json</span><br></pre></td></tr></table></figure>
<p>在<code>app.js</code>里面用一句话引用路由<code>app.use(require(&#39;./controllers&#39;))</code></p>
<p>其实这样写也挺好的,但是之前觉得很秀的写法像这样:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">app.route(<span class="string">'/tasks'</span>)</span><br><span class="line">  .get(todoList.list_all_tasks)</span><br><span class="line">  .post(todoList.create_a_task);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">app.route(<span class="string">'/tasks/:taskId'</span>)</span><br><span class="line">  .get(todoList.read_a_task)</span><br><span class="line">  .put(todoList.update_a_task)</span><br><span class="line">  .delete(todoList.delete_a_task);</span><br></pre></td></tr></table></figure>
<p>我猜如果我来实现的话会像是这样</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">router = <span class="built_in">require</span>(<span class="string">'express'</span>).Router()</span><br><span class="line"></span><br><span class="line">router.get(<span class="string">'/tasks'</span>,todoList.list_all_tasks)</span><br><span class="line">router.post(<span class="string">'/tasks'</span>,todoList.create_a_task)</span><br><span class="line"></span><br><span class="line">router.get(<span class="string">'/tasks/:taskId'</span>,todoList.read_a_task)</span><br><span class="line">router.put(<span class="string">'/tasks/:taskId'</span>,todoList.update_a_task)</span><br><span class="line">router.delete(<span class="string">'/tasks/:taskId'</span>,todoList.delete_a_task)</span><br><span class="line"></span><br><span class="line">app.use(<span class="string">'/'</span>,router)</span><br></pre></td></tr></table></figure>
<p>果然很多冗余,不过能用route方法减少冗余也<code>只限</code>REST API这种操作了,因为重复的主要是url</p>
<h4 id="Summary"><a href="#Summary" class="headerlink" title="Summary"></a>Summary</h4><p>总结一下吧,用路由还是得像以前那样用,不过在设计REST API的时候,别忘了可以用<code>route</code>方法秀一波操作</p>
<h4 id="附录"><a href="#附录" class="headerlink" title="附录"></a>附录</h4><p>在这里不时更新一些关于目录结构的博文</p>
<p><a href="http://www.codekitchen.ca/guide-to-structuring-and-building-a-restful-api-using-express-4/" target="_blank" rel="noopener">How I Structure Restful APIs using Express4</a></p>
<p>这个目录结构是这样的</p>
<p><img src="http://www.codekitchen.ca/content/images/2015/06/Screen-Shot-2015-06-15-at-12-48-42-AM.png" alt="目录结构"></p>
<p>分开auth,models,routes等目录.这里的routes目录让人反思是不是一定要这样写啊,结合10分钟restful那篇文章来看的话,再分出一个controller目录用来储存主要逻辑,然后在routes里面调用他们可能会比较好</p>

    </div>

    

    

    <!-- Comments -->
    

</div>
        </section>

    </div>
</div>


</div>

<!-- Footer -->
<div class="push"></div>

<footer class="footer-content">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 footer-about">
                <h2>关于</h2>
                <p>
                    将就用来写一下技术博客
                </p>
            </div>
            
    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 recent-posts">
        <h2>最近文章</h2>
        <ul>
            
            <li>
                <a class="footer-post" href="/kobako-blog/2018/06/14/elm-route-learn/">elm路由学习</a>
            </li>
            
            <li>
                <a class="footer-post" href="/kobako-blog/2018/06/13/git-submodule-bug/">git-submodule的使用以及bug</a>
            </li>
            
            <li>
                <a class="footer-post" href="/kobako-blog/2018/06/12/english-learn-note/">学习英语笔记</a>
            </li>
            
            <li>
                <a class="footer-post" href="/kobako-blog/2018/06/08/express-project-structure-design/">软工项目总结,Express项目架构实践</a>
            </li>
            
        </ul>
    </div>



            
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <ul class="list-inline footer-social-icons">
                    
                    <li class="list-inline-item">
                        <a href="https://github.com/zhuobinggang">
                            <span class="footer-icon-container">
                                <i class="fa fa-github"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    <li class="list-inline-item">
                        <a href="mailto:zhuobinggang@gmail.com">
                            <span class="footer-icon-container">
                                <i class="fa fa-envelope-o"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="footer-copyright">
                    @kobako All right reserved
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- After footer scripts -->

<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Tween Max -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>

<!-- Gallery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- Custom JavaScript -->
<script src="/kobako-blog/js/main.js"></script>

<!-- Disqus Comments -->



</body>

</html>